<template>
  <div class="rider-container">
    <el-card class="rider-card" shadow="never">
      <!-- 搜索区域 -->
      <div class="search-bar">
        <el-form :inline="true" :model="search" class="search-form">
          <el-form-item label="骑手姓名">
            <el-input v-model="search.name" placeholder="请输入骑手姓名" clearable />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="search.phone" placeholder="请输入手机号" clearable />
          </el-form-item>
          <el-form-item label="状态">
            <el-select style="width: 100px" v-model="search.status" placeholder="请选择状态" clearable>
              <el-option label="在职" :value="1" />
              <el-option label="离职" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="pageSearch()">
              <el-icon>
                <Search />
              </el-icon>搜索
            </el-button>
            <el-button @click="search = getInitRiderSearch()">
              <el-icon>
                <Refresh />
              </el-icon>重置
            </el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="handleAdd">
          <el-icon>
            <Plus />
          </el-icon>新增骑手
        </el-button>
      </div>

      <!-- 骑手表格 -->
      <el-table :data="riders" border stripe style="width: 100%" height="calc(100vh - 280px)">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column label="骑手信息" min-width="200">
          <template #default="{ row }">
            <div class="rider-info">
              <el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
              <div class="rider-detail">
                <div class="rider-name">{{ row.name }}</div>
                <div class="rider-phone">{{ row.phone }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="工号" width="300" align="center" />
        <el-table-column prop="joinTime" label="入职时间" width="180" align="center" />
        <el-table-column label="离职时间" width="180" align="center">
          <template #default="{ row }">
            <span v-if="row.status === false">{{ row.leaveTime }}</span>
            <span v-else class="placeholder">-</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalOrders" label="总接单数" width="100" align="center" />
        <el-table-column prop="todayOrders" label="今日接单" width="100" align="center" />
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="row.status ? 'success' : 'info'" effect="plain">
              {{ row.status ? '在职' : '离职' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template #default="{ row }">
            <el-button-group class="operation-group">
              <el-tooltip content="编辑" placement="top">
                <el-button type="primary" link @click="handleEdit(row)">
                  <el-icon>
                    <Edit />
                  </el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button type="danger" link @click="handleDelete(row)">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </el-button>
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination v-model:current-page="page.currentPage" v-model:page-size="page.pageSize"
          :page-sizes="[5, 10, 20]" :total="page.total" layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>

  <!-- 添加新增/编辑骑手对话框 -->
  <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑骑手' : '新增骑手'" width="500px" :close-on-click-modal="false"
    destroy-on-close>
    <el-form ref="riderFormRef" :model="form" :rules="riderFormRules" label-width="80px" class="rider-form">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入骑手姓名" clearable />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号" clearable />
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="form.status" :active-value="true" :inactive-value="false" inline-prompt :active-text="'在职'"
          :inactive-text="'离职'" style="--el-switch-on-color: #13ce66" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit(riderFormRef)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { Page } from '@/models/baseModel';
import { getInitRiderForm, getInitRiderSearch, Rider, RiderApi, RiderForm, riderFormRules, RiderSearch } from '@/models/riderModel';
import { ElMessageBox, FormInstance } from 'element-plus';
import { onMounted, ref } from 'vue';

// 搜索条件
const search = ref<RiderSearch>(getInitRiderSearch())
// 骑手数据
const riders = ref<Rider[]>([])
// 分页实体
const page = ref<Page>({ currentPage: 1, pageSize: 5, total: 0 })
// 是否展示 新增/编辑 骑手窗口
const dialogVisible = ref(false)
// 是否为编辑
const isEdit = ref(false)
// 提交表单
const form = ref<RiderForm>(getInitRiderForm())
// 校验对象
const riderFormRef = ref<FormInstance>()

onMounted(() => {
  // 加载骑手数据
  pageSearch()
})

// 打开新增
const handleAdd = () => {
  isEdit.value = false
  form.value = getInitRiderForm()
  dialogVisible.value = true
}

// 打开修改
const handleEdit = (row: Rider) => {
  isEdit.value = true
  form.value = { ...row }
  dialogVisible.value = true
}

// 删除数据
const handleDelete = (row: Rider) => {
  ElMessageBox.confirm('确定要删除吗？', '警告')
    .then(() => {
      RiderApi.deleteById(row.id)
        .then(() => { riders.value = riders.value.filter(r => r.id != row.id) })
    })
    .catch(() => { })
}

// 上传表单
const handleSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      // 编辑
      if (isEdit.value) {
        RiderApi.updateById(form.value, form.value.id)
          .then(data => {
            const index = riders.value.findIndex(r => r.id == data.id)
            riders.value[index] = data
            dialogVisible.value = false
          })
      }
      // 新增
      else {
        RiderApi.create(form.value)
          .then(data => {
            riders.value.push(data)
            dialogVisible.value = false
          })
      }
    }
  })
}

// 分页获取数据
const pageSearch = (currentPage: undefined | number = undefined) => {
  if (currentPage) page.value.currentPage = currentPage
  RiderApi.pagingSearch(search.value, page.value)
    .then(resultPage => {
      page.value.currentPage = resultPage.currentPage
      page.value.pageSize = resultPage.pageSize
      page.value.total = resultPage.total
      riders.value = resultPage.data
    })
}

// 每页大小改变时
const handleSizeChange = (val: number) => {
  page.value.pageSize = val
  pageSearch()
}

// 页码改变时
const handleCurrentChange = (val: number) => {
  page.value.currentPage = val
  pageSearch()
}
</script>

<style scoped>
.rider-container {
  height: 100%;
}

.rider-card {
  height: 100%;
  border-radius: 8px;
}

.search-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

:deep(.el-card__body) {
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  padding: 16px;
}

:deep(.el-table) {
  flex: 1;
}

:deep(.el-table__row) {
  height: 60px;
}

:deep(.el-table__cell) {
  padding: 8px 0;
}

.rider-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rider-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rider-name {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.rider-phone {
  font-size: 13px;
  color: #909399;
}

.operation-group {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.operation-group .el-button {
  font-size: 16px;
  padding: 4px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}

/* 表格滚动条样式 */
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  border-radius: 3px;
  background: #dcdfe6;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
  border-radius: 3px;
  background: #f5f7fa;
}

.placeholder {
  color: #909399;
}

/* 表单样式 */
.rider-form {
  padding: 20px;
}

/* 头像上传样式 */
.avatar-uploader {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
  object-fit: cover;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}

/* 对话框样式 */
:deep(.el-dialog__body) {
  padding: 0;
}

.dialog-footer {
  padding: 20px;
  text-align: right;
}

/* 表单项样式 */
:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}
</style>